<template>
    <div class="register">
        <el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-width="80px" class="register-form">
            <h3>用户注册</h3>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirm">
                <el-input type="password" v-model="registerForm.confirm" placeholder="请再次输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleRegister">注册</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script>
import axios from 'axios'
export default {
    data() {
        return {
            registerForm: {
                username: '',
                password: '',
                confirm: ''
            },
            registerRules: {
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { min: 3, max: 20, message: '邮箱长度在3到20个字符之间', trigger: 'blur' }
                ],
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 20, message: '用户名长度在3到20个字符之间', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '密码长度在6到20个字符之间', trigger: 'blur' }
                ],
                confirm: [
                    { required: true, message: '请再次输入密码', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            if (value !== this.registerForm.password) {
                                callback(new Error('两次输入密码不一致'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ]
            }
        };
    },
    methods: {
        handleRegister() {
            this.$refs.registerForm.validate(valid => {
                if (valid) {
                    // 发送注册请求
                    axios.post('http://localhost:3000/api/register', {
                        username: this.registerForm.username,
                        password: this.registerForm.password,
                        email: this.registerForm.email
                    }).then(res => {
                        if (res.data.success) {
                            this.$message.success('注册成功，请登录');
                            this.$router.push('/login');
                        } else {
                            this.$message.error(res.data.message);
                        }
                    }).catch(error => {
                        console.log(error);
                        this.$message.error('注册失败，请重试');
                    });
                } else {
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs.registerForm.resetFields();
        }
    }
};
</script>

<style scoped>
.register {
    max-width: 600px;
    margin: 0 auto;
    padding: 50px 20px;
}

.register-form {
    display: block;
}
</style>